<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-16 11:13:50
 * @FilePath: \vue3_test\src\App.vue
 * @Description: 父组件
-->
<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <ChildOne />
      </template>
      <template v-slot:fallback>
        <h3>稍等, 加载中...</h3>
      </template>
    </Suspense>
  </div>
</template>

<script>
// import ChildOne from "./components/ChildOne"; // 静态引入
import { defineAsyncComponent } from "vue";
const ChildOne = defineAsyncComponent(() => import("./components/ChildOne")); // (动态)异步引入
export default {
  name: "APP",
  components: { ChildOne },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
